<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3616992_1axz58wl1lh.css?spm=a313x.7781069.1998910419.76&file=font_3616992_1axz58wl1lh.css">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        ul,li{
            list-style: none;
        }
        header{
            width: 600px;
            margin: 30px auto;
        }
        .list{
            width: 700px;
            margin: 0 auto;
        }
        .list li{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .list li span{
            flex: 1; 
            text-indent: 20px;
        }
        .list i{
            color: red;
        }
        .list img{
            height: 30px;
        }
    </style>
</head>
<body>
    <header>
        <input id="input" type="text">
        <button class="add">添加</button>
    </header>
    <ul class="list">

    </ul>
    <script>
        // 复习前后端交互 ajax fetch promise
        // 接口地址：https://cnodejs.org/api
        const list = document.querySelector(".list");

        fetch("https://cnodejs.org/api/v1/topics")
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                const data = res.data;
                let renderHtml = "";
                data.forEach((item)=> {
                    // console.log(item);
                    renderHtml+=`
                    <li>
                        <img src="${item.author.avatar_url}"/>
                        <span>${item.title}</span>
                        <time>${item.last_reply_at}</time>
                        <i class="iconfont icon-shanchu"></i>
                    </li>
                    `;

                    // // 页面回流(每次都添加li，很麻烦) 重绘(样式改变工作还少点)
                    // const li = document.createElement("li");
                    // li.innerHTML = `
                    //     <img src="${item.author.avatar_url}"/>
                    //     <span>${item.title}</span>
                    //     <time>${item.last_reply_at}</time>
                    //     <i class="iconfont icon-shanchu"></i>
                    // `;
                    // list.appendChild(li);
                });
                // 写到forEach外面，一次性赋值
                list.innerHTML=renderHtml; //页面只重构一次，减少回流的操作，让浏览器少干活
            })
            // 封装一个时间函数，展示成几天前几个月前，刚刚

    // https://www.npmjs.com/ 
    // nodejs
    </script>
</body>
</html>